<template>
  <div class="wrapper">
    <top-header title="绑定手机号"></top-header>
    <div class="fBox">
        <!-- <div class="itemF headerF">
            <text class="imgF">绑定手机号</text>
        </div> -->
        <div class="itemF contentF">
          <image src="bmlocal://assets/acw/login_user_phoneicon.png" class="imgC"></image>
           <input type="tel" class="mobileC" placeholder="请输入手机号" v-model="mobileNum"/>
        </div>
        <div class="itemF contentF">
          <image src="bmlocal://assets/acw/login_password_lockicon.png" class="imgC"></image>
          <input type="number" class="pwdC" placeholder="请输入验证码" v-model="code"/>
          <wxc-button :text="sendTxt" type="blue" :btn-style="btnStyle2" :text-style="textStyle2" :disabled="sendDisable" @wxcButtonClicked="sendValidateCode"></wxc-button>
        </div>
        <div class="itemF bottomF">
            <wxc-button text="绑定手机号" type="blue" :btn-style="btnStyle" @wxcButtonClicked="bindMobile"></wxc-button>
        </div>
        
    </div>
    <wxc-loading :show="isShowLoad" type="default"></wxc-loading>
    <wxc-part-loading :show="isShowLoad"></wxc-part-loading>
  </div>
</template>

<style scoped>

.iconfont {
    font-family: iconfont;
}

.wrapper {
    background-color: #F4F4F4;
    padding-bottom: 0;
    padding-top: 0;
    margin: 0;
    width: 750px;
    /* background-color: #ff0 */
}
.fBox {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /* justify-content: space-around; */
    align-items: center;
    width: 750px;
    /* background-color: aqua; */
}

.threeD {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 750px;
    height: 50px;
}

.lineD {
    width: 150px;
    height: 2px;
    background-color: #e1e1e1;
}

.lineTxt {
    padding-left: 15px;
    padding-right: 15px;
    color: #A5A5A5;
}

.bTxt {
   color: #A5A5A5;
   font-size: 22px;
}

.bbTxt {
    color: blue;
    font-size: 22px;
}

.itemF {
    width: 550px;
}

.itemFB {
    position: relative;
    width: 750px;
    bottom: 10px;
    /* background-color: #000; */
}

.protocol {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50px;
    /* margin-bottom: 1px; */
}

.headerF {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    margin-bottom: 160px;
}

.textH {
    color: #000;
    font-size: 38px;
    margin-bottom: 50px;
}

.contentF {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #e1e1e1;
    margin-top: 50px;
    padding-bottom: 15px;
}

.wxF {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    margin-top: 50px;
    padding-bottom: 15px;
}

.imgC {
  width: 30px;
  height: 40px;
}

.imgWX {
    width: 100px;
    height: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.mobileC {
  height: 50px;
  line-height: 50px;
  flex: 1;
  /* width: 400px; */
  margin-left: 20px;
  /* background-color: #53ba37; */
}

.pwdC {
  height: 50px;
  line-height: 50px;
  /* width: 300px; */
  flex: 1;
  margin-left: 20px;
  /* background-color: #375aba; */
}

.textM {
    color: #A5A5A5;
    font-size: 26px;
    margin-top: 20px;
}

.imgF {
    width: 350px;
    height: 70px;
}

.bottomF {
    width: 550px;
    margin-top: 100px;
}

</style>

<script>

import { WxcButton, WxcLoading, WxcPartLoading } from 'weex-ui'
import header from '../common/header'
export default {
    components: {
        WxcButton,
        WxcLoading, 
        WxcPartLoading,
        'top-header': header,
    },
    data () {
        return {
            token: '',
            btnStyle: {
                width: '550px'
            },
            btnStyle2: {
                width: '220px',
                height: '70px',
                lineHeight: '60px'
            },
            textStyle2: {
                fontSize: '28px'
            },
            mobileNum: '',
            code: '',
            sendDisable: false,
            sendTxt: '发送验证码',
            count: 60,
            isShowLoad: false,
            curHomeBackTriggerTimes: 1,
            maxHomeBackTriggerTimes: 2,
            token: ''
        }
    },
    created() {
    },
    methods: {
        // 返回
        back () {
            this.$router.back();
        },
        showTime(obj){
            if (obj.count == 0) {
                // do job
                obj.sendTxt = "发送验证码";
                obj.count = 60;
                obj.sendDisable = false;
                return;
            } else {              
                obj.sendTxt = "重新发送（" + obj.count + "S）"
                obj.count -= 1;
                setTimeout(function () {
                    obj.showTime(obj);
                }, 1000);
            }
        },
        sendValidateCode(e){
            this.sendDisable = true;
            // console.log(e.disabled);
            var vm = this;
            this.showTime(vm);

            vm.$fetch({
                method: 'POST',    // 大写
                name: 'login.getMes', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    mobile: this.mobileNum
                }
            }).then(resData => {
                // 成功回调
                console.log(resData)
                vm.$notice.toast({ message: "发送成功"})
            }, error => {
                // 错误回调
                console.log(error)
                vm.$notice.toast({ message: "发送失败"})
            })
        },
        bindMobile () {
            const vm = this;
            if(!this.mobileNum) {
                this.$notice.toast({ message: "请输入手机号"})
                return;
            } else if (!this.code) {
                this.$notice.toast({ message: "请输入验证码"})
                return;
            }
            this.isShowLoad = true;

            var userInfo = this.$storage.getSync('UserInfo');

            vm.token = userInfo.token;

            var wxLoginInfo = vm.$storage.getSync('WxUserInfo')
            this.$fetch({
                method: 'POST',    // 大写
                name: 'login.bindMobile', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                data: {
                    mobile: this.mobileNum,
                    code: this.code,
                    wxUserInfo: wxLoginInfo
                },
                header: {
                    'X-TMACW-APP-Token': vm.token
                }
            }).then(resData => {
                // 成功回调
                this.isShowLoad = false;
                console.log(resData)
                if(resData && resData.errno == 0){
                    this.$storage.setSync('LoginStatus', 'true')
                    this.$router.open({
                        name: 'acw.indexnew',
                        type: 'PUSH',
                        canBack: false,
                    })
                } else {
                    this.$notice.toast({ message: resData.errmsg})
                }
            }, error => {
                // 错误回调
                this.isShowLoad = false;
                console.log(error)
                this.$notice.toast({ message: "绑定失败, 请重试"})
            })
        },
    }
}
  
</script>